//公共配置
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CopyWebpackPlugin = require("copy-webpack-plugin")
const webpack = require("webpack")
//要打包的页面
let pages = [
    "index", "startTest", "test", "finishTest", "login", "personalCenter",
    "register", "analysis", "collection", "exercises", "errors"
]
module.exports = {
    entry: {
        ...pages.reduce((sum, value) => {
            return {
                ...sum,
                [value]: `./src/js/${value}.js`
            }
        }, {})
    },
    output: {
        // 打包的文件默认放在项目dist目录下面，项目没有dist目录创建一个
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].js"
    },
    plugins: [
        // 根据pages数组来自动生成new HtmlWebpackPlugin插件
        ...pages.map(item => {
            return (
                new HtmlWebpackPlugin({
                    template: `./src/${item}.html`, //文件路径
                    filename: `${item}.html`,       //打包后文件名字
                    chunks: [item]                  //对应js是哪一个文件
                })
            )
        }),
        new MiniCssExtractPlugin({
            filename: "./css/[name].css"
        }),
        // 自动打包jquery
        new webpack.ProvidePlugin({
            "$": "jquery"
        }),
        new CopyWebpackPlugin({
            patterns: [
                { "from": "./src/static", to: "./static" }
            ]
        })
    ],
    module: {
        rules: [
            {
                test: /\.css/, //打包的文件项目中所有的css后缀名字
                include: [path.resolve(__dirname, "src")], //限制打包的范围，src这个目录找css
                exclude: /node_modules/, //排除项目node_modules
                use: [MiniCssExtractPlugin.loader, "css-loader"] //打插件
            },
            {
                test: /\.scss/, //打包的文件项目中所有的scss后缀名字
                include: [path.resolve(__dirname, "src")], //限制打包的范围，src这个目录找css
                exclude: /node_modules/, //排除项目node_modules
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] //打包插件
            },
            { //压缩 css 和 js 中的图片
                test: /\.(png|jpg|gif|jpeg|webp|svg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024 * 8, // 8kb 大小以下的图片文件都用 base64 处理
                            outputPath: './images/',
                            esModule: false // 解决 html-webpack-plugin 和 file-loader@5 的冲突
                        }
                    }
                ],
                exclude: /node_modules/
            },
            { // html 中的图片配置
                test: /\.(htm|html)$/i,
                use: ['html-withimg-loader']
            }
        ]
    },
    devServer: {
        hot: true, //热加载，只要你项目代码变化了，默认刷新浏览器
        port: 8890, //默认端口8080，我们可以设置8888，我们自己设置端口 5000以上
        open: ["/index.html"] //true 默认打开首页（index.html）,["login.html"]
    }
}